/**
* @作者:邹蕴果
* @创建时间：2021/7/13
* @修改时间：2021/7/16
*/

<template>
	<view class="main">
		<view class="header">
			<view class="name">享租</view>
			<view class="navitems">
				<view class="navitem">商家登录</view>
				<view class="navitem">管理员登录</view>
			</view>
		</view>
		<view class="body">
			<view class="text">商家注册</view>
			<view class="sides">
				
               <!-- 厂家注册 -->
				<el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
					<el-tab-pane label="手机注册" name="first" class="subtab">
						<view class="imgrow">
							<view class="rowtext">头像:</view>
							<el-upload action="#" ref="upload" list-type="picture-card" :auto-upload="false"
								:on-change="changeImg" :show-file-list="false" :before-upload="beforeAvatarUpload">
								<image v-if="imageUrl" :src="imageUrl" mode="aspectFill" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</view>
						<view class="inputrow">
							<view class="rowtext">店主姓名:</view>
							<el-input inputBox class="dbinput" v-model="OwnerName"></el-input>
							<view class="dbtext">店铺名称:</view>
							<el-input inputBox class="dbinput" v-model="Name"></el-input>
						</view>
						<view class="inputrow">
							<view class="rowtext">店主证件号:</view>
							<el-input class="inputBox" v-model="OwnerID"></el-input>
						</view>
						<view class="inputrow">
							<view class="rowtext">手机号:</view>
							<el-input class="inputBox" v-model="PhoneNumber"></el-input>
						</view>
						<!-- <view class="inputrow">
							<view class="rowtext">验证码:</view>
							<el-input class="codeinput" v-model="veriCode"></el-input>
							<el-button v-show="show" type="primary" class="verificationCode" @click="getCodeByPhone">
								获取验证码</el-button>
							<el-button v-show="!show" type="info" plain disabled class="verificationCode">{{count}}(s)
							</el-button>
						</view> -->
						<view class="inputrow">
							<view class="rowtext">密码:</view>
							<el-input inputBox v-model="password" show-password></el-input>
						</view>
						<el-button type="primary" class="submitButton" @click="submit(1)">
							<view>立即注册</view>
						</el-button>

					</el-tab-pane>
					<!-- 邮箱注册 -->
					<el-tab-pane label="邮箱注册" name="second" class="subtab">

						<view class="imgrow">
							<view class="rowtext">头像:</view>
							<el-upload action="#" ref="upload" list-type="picture-card" :auto-upload="false"
								:on-change="changeImg" :show-file-list="false" :before-upload="beforeAvatarUpload">
								<image v-if="imageUrl" :src="imageUrl" mode="aspectFill" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</view>
						<view class="inputrow">
							<view class="rowtext">店主姓名:</view>
							<el-input inputBox class="dbinput" v-model="OwnerName"></el-input>
							<view class="dbtext">店铺名称:</view>
							<el-input inputBox class="dbinput" v-model="Name"></el-input>
						</view>
						<view class="inputrow">
							<view class="rowtext">店主证件号:</view>
							<el-input class="inputBox" v-model="OwnerID"></el-input>
						</view>
						<view class="inputrow">
							<view class="rowtext">邮箱地址:</view>
							<el-input class="inputBox" v-model="MailAdress"></el-input>
						</view>
						<!-- <view class="inputrow">
							<view class="rowtext">验证码:</view>
							<el-input class="codeinput" v-model="veriCode"></el-input>
							<el-button v-show="show" type="primary" class="verificationCode" @click="getCodeByEmail">
								获取验证码</el-button>
							<el-button v-show="!show" type="info" plain disabled class="verificationCode">{{count}}(s)
							</el-button>
						</view> -->
						<view class="inputrow">
							<view class="rowtext">密码:</view>
							<el-input inputBox v-model="password" show-password></el-input>
						</view>
						<el-button type="primary" class="submitButton" @click="submit(2)">
							<view>立即注册</view>
						</el-button>

					</el-tab-pane>


				</el-tabs>
				<image src="../../static/image/register.png" class="staticimg"></image>
			</view>


		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				releUrl: '',
				OwnerName: '',
				Name: '',
				OwnerID: '',
				PhoneNumber: 0,
				veriCode: '',
				password: '',
				MailAdress: '',

				url: '',
				show: true,
				count: '',
				activeName: 'second',
				imageUrl: '',
			};
		},
		methods: {
			changeImg(file) {
				this.imageUrl = file.url
			},
			//头像上传处理
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			//由于发送验证码需要企业团体认证，因此该功能取消，不过前端显示的方法已经写好
/* 
					getCodeByPhone() {

				if (this.PhoneNumber != 0) {
					//axios请求
					console.log(this.PhoneNumber)

					// 验证码倒计时
					if (!this.timer) {
						this.count = 60;
						this.show = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= 60) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				} else {
					this.$alert('请输入手机号', '警告', {
						confirmButtonText: '确定',

					});
				}
			}, */
			//注册提交
			async submit(sender) {

				const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
				const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
				const regID =
					/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
					//身份证号正则检验
				if (regID.test(this.OwnerID)) {
					if (sender == 1) {
						//手机号正则检验
						if (regMobile.test(this.PhoneNumber)) {
							this.$confirm('确认要提交注册信息?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								uni.uploadFile({
									url: 'http://47.96.168.135:7388/Business/RegisterWithFaceImage', //仅为示例，非真实的接口地址
									filePath: this.imageUrl,
									name: 'face',
									formData: {
									identityNum: this.OwnerID,
									name: this.OwnerName,
									passWord: this.$md5(this.password),
									phoneNum: this.PhoneNumber,
									storeName: this.Name,
									},
									//回调函数
									success: (uploadFileRes) => {


										var b = uploadFileRes.data.slice(10, 12)
										if (b == 14) {
											this.$alert('昵称已经被注册', '警告', {
												confirmButtonText: '确定',

											});

										} else if (b == 15) {
											this.$alert('手机号已经被注册', '警告', {
												confirmButtonText: '确定',

											});

										} else if (b == 16) {
											this.$alert('邮箱号已被注册', '警告', {
												confirmButtonText: '确定',

											});

										} else if (b == 17) {
											this.$alert('店铺名已存在', '警告', {
												confirmButtonText: '确定',

											});

										} else if (b == 18) {
											this.$alert('身份证号已注册', '警告', {
												confirmButtonText: '确定',

											});

										} else {
											this.$message({
												type: 'success',
												message: '注册成功!'
											})

											setTimeout(uni.redirectTo({
												url: "ShopLoginIndex"
											}), 1000)
										}


									}
								});

							})

						} else {
							this.$alert('手机号不合法', '警告', {
								confirmButtonText: '确定',

							});
						}
						//邮箱注册
					} else if (sender == 2) {
						if (regEmail.test(this.MailAdress)) {
							this.$confirm('确认要提交注册信息?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								uni.uploadFile({
									url: 'http://47.96.168.135:7388/Business/RegisterWithFaceImage', //仅为示例，非真实的接口地址
									filePath: this.imageUrl,
									name: 'face',
									formData: {
									identityNum: this.OwnerID,
									name: this.OwnerName,
									passWord: this.$md5(this.password),
									email: this.MailAdress,
									storeName: this.Name,

									},
									success: (uploadFileRes) => {
										var b = uploadFileRes.data.slice(10, 12)


										if (b == 14) {
											this.$alert('昵称已经被注册', '警告', {
												confirmButtonText: '确定',

											});

										} else if (b == 15) {
											this.$alert('手机号已经被注册', '警告', {
												confirmButtonText: '确定',

											});

										} else if (b == 16) {
											this.$alert('邮箱号已被注册', '警告', {
												confirmButtonText: '确定',

											});

										} else if (b == 17) {
											this.$alert('店铺名已存在', '警告', {
												confirmButtonText: '确定',

											});

										} else if (b == 18) {
											this.$alert('身份证号已注册', '警告', {
												confirmButtonText: '确定',

											});

										} else {
											this.$message({
												type: 'success',
												message: '注册成功!'
											})

											setTimeout(uni.redirectTo({
												url: "ShopLoginIndex"
											}), 1000)
										}


									}
								});
							})

						} else {
							this.$alert('邮箱号不合法', '警告', {
								confirmButtonText: '确定',

							});
						}
					} else {

						this.$alert('身份证号格式不合法！', '警告', {
							confirmButtonText: '确定',

						});
					}



				}
			},
/* 			getCodeByEmail() {

				if (this.MailAdress != 0) {
					//axios请求


					// 验证码倒计时
					if (!this.timer) {
						this.count = 60;
						this.show = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= 60) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				} else {
					this.$alert('请输入邮箱', '警告', {
						confirmButtonText: '确定',

					});
				}
			}, */
			handleClick(tab, event) {
			}
		}
	}
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		justify-content: center;
		align-items: center;
		height: 800rpx;
	}

	.dbinput {
		width: 30%;

	}

	// 顶栏style
	.header {
		width: 100%;
		height: 50rpx;
		display: flex;
		background-color: white;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		border-bottom: 1px solid #888888;
	}

	.name {

		transform: translateX(-400rpx);
		margin-right: 20%;
	}

	.sides {
		display: flex;
		flex-direction: row;
		height: 600rpx;
		width: 100%;
	}

	.navitems {

		display: flex;
		flex-direction: row;
		margin-left: 100rpx;
		transform: translateX(400rpx);


	}

	.selectimgButton {
		margin-top: 10%;
		margin-left: 10%;
	}

	.navitem {
		font-size: 20px;
		margin-left: 10rpx;
	}

	.body {

		display: flex;
		flex-direction: column;
		height: 80%;
		width: 100%;
	}

	.pager {}

	.dbtext {
		font-size: 8rpx;
		margin-left: 2%;
		margin-right: 3%;
	}

	.staticimg {
		margin-top: 5%;
		margin-left: 2%;
		width: 45%;
		height: 800rpx;
	}

	.text {
		margin-left: 7%;
		font-size: 10rpx;
		float: left;
	}

	.tab {
		margin-left: 7%;
		width: 35%;
		height: 5rpx;

	}

	.subtab {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.imgrow {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.img {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;

	}

	.rowtext {
		font-size: 8rpx;
		width: 15%;
		margin-right: 5%;
	}

	.inputrow {
		width: 100%;
		height: 30rpx;
		margin-top: 10%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.inputBox {}

	.codeinput {
		margin-left: -2.5%;
	}

	.verificationCode {
		flex: 1;
	}

	.codeinput {
		width: 50%;
	}

	.avatar-uploader {}

	.avatar {
		width: 100%;
		height: 100%;
	}

	.submitButton {
		height: 80rpx;
		margin-top: 5%;
		margin-left: 20%;
		width: 66.57%;
		border-radius: 50rpx;
		margin-bottom: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
